﻿<style>
.msgbox{width: 100%;height: 540px;overflow-x:hidden;overflow-y:auto;background:#efeff4;}	
.msgbox dl{clear:both;zoom:1;overflow:hidden;position:relative}
.msgbox .from{width:90%;left:0;padding:10px}
.msgbox .from dt{width:40px;height:40px;border-radius:4px;overflow:hidden;float:left;position:absolute;top:32px;left:10px;bottom:10px;background:#60aae9}
.msgbox .from dt img{width:40px;height:40px}
.msgbox .from .n{width:100%;float:left;font-size:12px;color:#9d9d9d;margin:0 0 5px 0px}
.msgbox .from .n span{padding:0 0 0 20px}
.msgbox .from .c{display:inline-block;max-width:75%;float:left;border-radius:4px;overflow:hidden;margin:0 0 0 55px;box-shadow:inset 0 0 10px #f1f1f1;border:1px solid #d1d1d1;background:#fff;font-size:14px;padding:10px;line-height:20px}
.msgbox .from .c img{ width: 60%;}
.msgbox .to{width:90%;right:0;padding:10px;float:right;margin:0 10px 0 0}
.msgbox .to dt{width:40px;height:40px;border-radius:4px;overflow:hidden;position:absolute;top:32px;right:0;bottom:10px;background:#60aae9}
.msgbox .to dt img{width:40px;height:40px}
.msgbox .to .n{width:100%;text-align:right;float:right;font-size:12px;color:#9d9d9d;margin:0 0px 5px 0}
.msgbox .to .n span{padding:0 20px 0 0}
.msgbox .to .c{display:inline-block;max-width:75%;float:right;border-radius:4px;background:#a0e75a;border:1px solid #85d55d;box-shadow:none;margin:0 45px 0 0;padding:10px;line-height:20px;font-size:14px}
.msgbox .to .c img{ width: 60%;}
.msgbox .sys_msg{text-align:center;margin:15px 0;font-size:12px;color:#9d9d9d;display:block;clear:both;zoom:1;overflow:hidden}
.msgbox .sys_msg dt{padding:0 0 5px}
.msgbox .sys_msg dt span{padding:0 0 0 20px}
.msgbox .sys_msg dd{background:#cecece;color:#fff;border-radius:4px;max-width:80%;margin:0 auto;padding:0 10px;height:22px;line-height:22px;display:inline-block;font-size:12px;text-align:center}
.msgbox .to .arrow{background:url(__PUBLIC__/admin/img/arrow2.png) no-repeat;display:block;width:7px;height:14px;background-size:7px 14px;position:absolute;right:49px;top:40px}
.msgbox .from .arrow{background:url(__PUBLIC__/admin/img/arrow1.png) no-repeat;display:block;width:7px;height:14px;background-size:7px 14px;position:absolute;left:59px;top:40px}
</style>
<div class="row">
    <div class="col-xs-12 col-md-12 col-lg-12">
        <div class="widget">
            <div class="widget-header bg-blue">
            	<i class="widget-icon fa fa-arrow-left"></i>
                <span class="widget-caption">发送消息</span>
                <div class="widget-buttons">
                    <a href="#" data-toggle="maximize">
                        <i class="fa fa-expand"></i>
                    </a>
                    <a href="#" data-toggle="collapse">
                        <i class="fa fa-minus"></i>
                    </a>
                    <a href="#" data-toggle="dispose">
                        <i class="fa fa-times"></i>
                    </a>
                </div>
            </div>
            <div class="widget-body" style="height: auto;">
				
				<div class="msgbox" id="msgbox">
					
					<volist name="cache" id="vo">
						
						<if condition="$vo['fromusername']==$openid">
							<dl class="from">
		                        <dt><img src="{$vo.headimgurl|substr=0,-1}46" /></dt>
		                        <dd class="n">{$vo.nickname}<span>{$vo.createtime|date="Y-m-d H:i:s",###}</span></dd>
		                        <dd class="c">
		                        		<if condition="$vo['msgtype']=='text'">
		                        			{$vo.content}
		                        		<elseif condition="$vo['msgtype']=='image'" />
		                        			<img src="{$vo.content}" />
		                        		<else />
		                        		
		                        		</if>
		                        </dd>
		                        <dd class="arrow"></dd>
		                    </dl>
						<else />
							<dl class="to">
		                        <dt><img src="__PUBLIC__/admin/img/tingzan.jpg" /></dt>
		                        <dd class="n"><span>{$vo.createtime|date="Y-m-d H:i:s",###}</span>我要洗衣</dd>
		                        <dd class="c">{$vo.content}</dd>
		                        <dd class="arrow"></dd>
		                    </dl>
						</if>
						
					</volist>
				</div>
				<form id="bbForm" action="" method="post" >
					<div class="input-group">
						<input type="hidden" name="openid" id="openid" value="{$openid}" />
	                    <textarea class="form-control textarea" id="content" name="content" style="height: 60px;"></textarea>
	                    <span class="input-group-btn">
	                       <button class="btn btn-primary butsend" type="submit" style="height: 60px;">发送</button>
	                    </span>
	                </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--面包屑导航封装-->
<div id="tmpbread" style="display: none;">{$breadhtml}</div>
<script type="text/javascript">
	setBread($('#tmpbread').html());
</script>

<script type="text/javascript">	 
var h=$(window).height()-320;
$('.msgbox').css('height',h);
var msgbox = document.getElementById('msgbox');
msgbox.scrollTop = msgbox.scrollHeight;
//发送消息
$('#bbForm').bootstrapValidator({
	submitHandler: function (validator, form, submitButton) {
       var tourl="{:U('Admin/Wxmessage/sendmsg')}";
       var data=$('#bbForm').serialize();
       var c=$('#content').val();
       var u=$('#openid').val();
       var openid='{$openid}';
       if(u==openid){
       		var now = new Date();
            var html='<dl class="to">\
                <dt><img src="__PUBLIC__/admin/img/tingzan.jpg" /></dt>\
                <dd class="n"><span>'+now.toLocaleString()+'</span>挺赞洗衣</dd>\
                <dd class="c">'+c+'</dd>\
                <dd class="arrow"></dd>\
            </dl>';
            $('.msgbox').append(html);
            var msgbox = document.getElementById('msgbox');
            msgbox.scrollTop = msgbox.scrollHeight;
       }
       $.bb.ajax('post',tourl,data,null);
       $('#content').val('');
       return false;
    },
});

//当游览器窗口改变改变聊天窗口
$(function(){
	 $(window).resize(function(){
	 	var h=$(window).height()-320;
		$('.msgbox').css('height',h);
	 });
	 
	 //回车提交
	 $("#content").keydown(function(e){
		 var e = e || event,
		 keycode = e.which || e.keyCode;
		 if(keycode==13){
		   var tourl="{:U('Admin/Wxmessage/sendmsg')}";
	       var data=$('#bbForm').serialize();
	       var c=$('#content').val();
	       var u=$('#openid').val();
	       var openid='{$openid}';
	       if(u==openid){
	       		var now = new Date();
	            var html='<dl class="to">\
	                <dt><img src="__PUBLIC__/admin/img/tingzan.jpg" /></dt>\
	                <dd class="n"><span>'+now.toLocaleString()+'</span>挺赞洗衣</dd>\
	                <dd class="c">'+c+'</dd>\
	                <dd class="arrow"></dd>\
	            </dl>';
	            $('.msgbox').append(html);
	            var msgbox = document.getElementById('msgbox');
	            msgbox.scrollTop = msgbox.scrollHeight;
	       }
	       $.bb.ajax('post',tourl,data,null);
	       $('#content').val('');
	       return false;
		 }
	  });
});

//自动刷新2秒刷新一次
bbcleardingshirenwu=setInterval(function() {
	getmsgfresh();
}, 2000);

//获取未读消息
function getmsgfresh(){
	var openid='{$openid}';
	var geturl="{:U('Admin/Wxmessage/getmsg')}";
	var nrirong;
	$.post(geturl,{'openid':openid},function(data){
		if(data.status){
			var data=data.data;
			for(var i = 0; i < data.length; i++) {
				var d=data[i];
				if(d.msgtype=='text'){
					nrirong = d.content;
				}else if(d.msgtype=='image'){
					nrirong = '<img src="'+d.content+'" />';
				}
				
				var html='<dl class="from">\
	                <dt><img src="'+d.headimgurl+'" /></dt>\
	                <dd class="n">'+d.nickname+'<span>'+d.data+'</span></dd>\
	                <dd class="c">'+nrirong+'</dd>\
	                <dd class="arrow"></dd>\
	            </dl>';
	            $('.msgbox').append(html);
	            var msgbox = document.getElementById('msgbox');
	            msgbox.scrollTop = msgbox.scrollHeight;
			}
		}
	});
}
</script>
